<!-- kv -->
<section class="one-section one-kv-section wt" data-title="KV">
  <div class="one-kv-swiper">
    <div class="swiper-wrapper">
      {%- for block in section.blocks -%}
        <div class="swiper-slide">
          <div class="one-kv-swiper-item">
            <picture class="one-wapHide one-kv-img">
              <img class="cover" src="{{ block.settings.desktop_image | img_url: "master" }}" loading="lazy">
            </picture>
            <picture class="one-wapOnly one-kv-img">
              <img class="cover" src="{{ block.settings.mobile_image | img_url: "master" }}" loading="lazy">
            </picture>
            <picture>
              <img
                class="one-kv-titleimg one-pc-rowCenter2 one-wap-rowCenter2"
                src="{{ block.settings.txt_image | img_url: "master" }}"
                loading="lazy"
              >
            </picture>
            <div
              class="one-kv-btnBox one-pc-rowCenter2 one-wap-rowCenter2 one-pc-flexRow one-wap-flexRow"
            >
              <a class="one-kv-play-btn" href="{{ block.settings.button_link_1 }}">
                <p class="one-b3 one-pc-wt one-wap-wt">Buy now</p>
              </a>
              <a class="one-kv-nav-btn one-pc-flexRow one-wap-flexRow" href="{{ block.settings.button_link_2 }}">
                <p class="one-b3 one-pc-wt  one-wap-wt">Explore</p>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="32"
                  height="32"
                  viewBox="0 0 32 32"
                  fill="none"
                >
                  <path d="M14.3984 11.1998L19.1984 15.9998L14.3984 20.7998" stroke="white"
                      stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
              </a>
            </div>
          </div>
        </div>
      {%- endfor -%}
    </div>
    <div class="one-kv-btn-div one-pc-rowCenter2 one-wap-rowCenter2 one-pc-flexRow one-wap-flexRow">
      {%- for block in section.blocks -%}
        <div class="one-kv-btn {% if forloop.first %}active{% endif %}">
          <div class="one-kv-btn-bar"></div>
        </div>
      {%- endfor -%}
    </div>
  </div>
</section>

{% schema %}
{
  "name": "KV",
    "settings": [
    ],
    "blocks":[
      {
        "type": "slide",
        "name": "Slide",
        "settings": [
          {
            "label": "Desktop image",
            "type": "image_picker",
            "id": "desktop_image"
          },
          {
            "label": "Mobile image",
            "type": "image_picker",
            "id": "mobile_image"
          },
          {
            "label": "Txt image",
            "type": "image_picker",
            "id": "txt_image"
          },
          {
            "type": "url",
            "id": "button_link_1",
            "label": "First button link"
          },
          {
            "type": "url",
            "id": "button_link_2",
            "label": "Second button link"
          }
        ]
      },
    ]
}
{% endschema %}
